<template>
	<view class="flex_ZC">
		<view class="secret flex_ZC">
			<image class="shield" :src=" baseUrl + '/static/icon/i_dunpai.png'" mode="aspectFill"></image>
			<text class="f44 c3 fw7"  v-if="!secreShow">开通More券免密支付</text>
			<text class="f44 c3 fw7" v-else >More券免密已开通</text>
		</view>

		<!-- 协议 -->
		<view class="information " v-if="!secreShow">
			<view class="zhengce " @click="toggleAgree">
				<image :src="baseUrl +'/static/icon/i_wxz.png'" mode="aspectFill" v-if="!selectStatus"></image>
				<image :src="baseUrl +'/static/icon/i_xz.png'" mode="aspectFill" v-if="selectStatus"></image>
			</view>
			<view class="information_box" >
				<text>我已阅读并同意</text>
				<text class="underline clause" @click.stop="serviceAgreements">《免密协议》</text>
			</view>
		</view>
		<view class="btns flex_c">
			<text  v-if="secreShow"  @click="tipShow = true">关闭</text>
			<text v-else @click="startNow">立即开通</text>
		</view>
			
		<u-popup :show="tipShow" mode="center" @close="tipShow = false" closeable bgColor="transparent">
			<view class="prompt2 flex_ZC">
				<text class="f32 fw7">提示</text>
				<view class="mrt40 flex_dq">
					<text class="f28 c6">是否关闭免密支付？</text>
				</view>
				<view class="btn_box mrt40 flex_ld_b">
					<text class="cancel" @click="tipShow = false ">取消</text>
					<text class="sure" @click="clickConfirm">确认</text>
				</view>
			</view>
		</u-popup>
		
		<u-keyboard ref="uKeyboard" dotDisabled mode="number" bgColor="transparent" closeOnClickOverlay :tooltip="false"
			:show="keyboardShow" @close="isClose" @change="changePwd" @backspace="backspace">
			<view class="keyboardss flex_ZC">
				<u-code-input dot space="26" :maxlength="6" v-model="securityPwd"></u-code-input>
			</view>
		</u-keyboard>
	</view>
</template>

<script>
	import {myuser,setSecretFree} from "../../api/user.js"
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				securityPwd: '',//密码
				selectStatus: false, //选中状态
				secreShow:0,
				tipShow:false,//提示框
				keyboardShow: false,//密码框
			}
		},
		onLoad() {
			this.getInfo()
		},
		watch: {
			securityPwd(newValue) {
				console.log(newValue.length);
				if (newValue.length >= 6) {
					this.keyboardShow = false
					this.confirmOpen()
				}
			}
		},
		methods: {
			getInfo() {
				myuser().then(res => {
					console.log(res);
					if (res.code == 1) {
						this.secreShow = res.data.secret_free
					}
				})
			},
			// 切换
			toggleAgree() {
				this.selectStatus = !this.selectStatus
			},
			// 服务协议
			serviceAgreements() {
				uni.navigateTo({
					url: '/pageUser/myuser/secretXy'
				})
			},
			// 立即开启
			startNow() {
				if (this.selectStatus) {
					this.keyboardShow = true
				} else {
					uni.$u.toast('请先勾选协议');
				}
			},

			// 关闭密码框
			isClose() {
				this.keyboardShow = false
			},
			// 输入密码
			changePwd(val) {
				if (this.securityPwd.length < 6) {
					this.securityPwd += val;
					console.log(this.securityPwd);
				} else {
					console.log('超出不累计');
				}
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.securityPwd.length) this.securityPwd = this.securityPwd.substr(0, this.securityPwd.length - 1);
				console.log(this.securityPwd);
			},
			// 开启
			confirmOpen() {
				let data = {
					secret_free:this.secreShow?0:1,
					agreement:this.selectStatus,
					pay_password:this.securityPwd,
				}
				console.log(data);
				setSecretFree(data).then(res => {
					console.log(res);
					this.securityPwd = ''
					if (res.code == 1) {
						this.keyboardShow = false
						uni.$u.toast(res.msg);
						setTimeout(function() {
							uni.navigateBack()
						}, 1500);
					}
				})
			},
			// 关闭
			clickConfirm(){
				this.tipShow = false
				let data = {
					secret_free:0,
					agreement:true,
					pay_password:'',
				}
				console.log(data);
				setSecretFree(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.keyboardShow = false
						uni.$u.toast(res.msg);
						setTimeout(function() {
							uni.navigateBack()
						}, 1500);
					}
				})
			},
		},
	}
</script>

<style scoped>
	.secret {
		margin-top: 70rpx;
	}

	.shield {
		width: 148rpx;
		height: 146rpx;
		margin-bottom: 40rpx;
	}

	.information {
		display: flex;
		margin-top: 68rpx;
	}

	.information_box {
		margin-left: 14rpx;
	}

	.information_box>text {
		color: #999999;
		font-size: 24rpx;
	}

	.clause {
		color: #FFC300 !important;
	}

	.zhengce>image {
		width: 32rpx;
		height: 32rpx;
		margin-top: 10rpx;
	}

	.btns>text {
		width: 558rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: linear-gradient(270deg, #FA2222 2%, #FFC400 98%);
		border-radius: 40rpx;
		font-size: 36rpx;
		color: #ffffff;
		margin-top: 54rpx;
	}
	
	.prompt2 {
		width: 690rpx;
		background: #ffffff;
		margin: 0rpx auto;
		border-radius: 20rpx;
		padding: 40rpx 0;
	}
	.mrt40{
		margin-top: 40rpx;
	}

	.service {
		width: 650rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
		background: #FFCC28;
		border-radius: 20rpx;
	}
	.btn_box {
		width: 100%;
	}
	.cancel {
		width: 220rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #333333;
		background: #F2F2F2;
		border-radius: 40rpx;
	}
	.sure {
		width: 220rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #FFCC28;
		font-size: 28rpx;
		color: #3333333;
		border-radius: 40rpx;
	}
	.keyboardss {
			width: 750rpx;
			padding: 50rpx 0;
			background: #ffffff;
		}
</style>